.floor-navigation {
  display: flex;
  align-items: center;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  padding: 0 24px;
  user-select: none;
  overflow: hidden;
  color: rgba(255,255,255,0.8);

  .icon-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;

    // 基于蓝湖坐标计算：图标位置 2692px，总览位置 2692+43+8=2743px（估算8px间距）
    // 相对于组件起始位置2668px：图标在24px，文字在67px左右

    .nav-icon {
      width: 43px;
      height: 29px;
      object-fit: contain;
      flex-shrink: 0;
      transition: opacity 0.3s ease;
    }

    .icon-text {
      white-space: nowrap;
      transition: color 0.3s ease;
      cursor: pointer;

      &:hover {
        color: rgba(255, 255, 255, 1);
      }
    }
  }

  .nav-items {
    display: flex;
    align-items: center;
    height: 100%;
    // 基于蓝湖坐标计算间距：
    // 2F夹层: 2791px，2F: 2916px，1F: 2998px
    // 相对于组件起始位置2668px：123px, 248px, 330px
    // 间距约为125px和82px，在代码中使用可配置的itemSpacing

    .nav-item {
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 4px 8px;
      border-radius: 4px;
      position: relative;

      &.active {
        height: 100%;
        background-image: url("http://localhost:8085/static/images/shouye/楼层激活.png");
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  // 主题样式
  &.dark {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  &.light {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);

    .icon-text,
    .nav-item {
      color: rgba(0, 0, 0, 0.8);

      &:hover {
        color: rgba(0, 0, 0, 1);
      }
    }
  }

  // 响应式设计
  //@media (max-width: 768px) {
  //  padding: 0 16px;
  //
  //  .icon-section {
  //    .nav-icon {
  //      width: 36px;
  //      height: 24px;
  //    }
  //
  //    .icon-text {
  //      font-size: calc(20px * 0.9);
  //    }
  //  }
  //
  //  .nav-items {
  //    gap: calc(56px * 0.7);
  //
  //    .nav-item {
  //      font-size: calc(20px * 0.9);
  //      padding: 3px 6px;
  //    }
  //  }
  //}

//  @media (max-width: 480px) {
//    padding: 0 12px;
//    height: 56px;
//
//    .icon-section {
//      .nav-icon {
//        width: 32px;
//        height: 20px;
//      }
//
//      .icon-text {
//        font-size: calc(20px * 0.8);
//      }
//    }
//
//    .nav-items {
//      gap: calc(56px * 0.5);
//
//      .nav-item {
//        font-size: calc(20px * 0.8);
//        padding: 2px 4px;
//      }
//    }
//  }
//
//  // 悬停效果
//  //&:hover {
//  //  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
//  //  transform: translateY(-1px);
//  //  transition: all 0.3s ease;
//  //}
//
//  // 焦点可访问性
//  //&:focus-within {
//  //  outline: 2px solid rgba(0, 255, 241, 0.5);
//  //  outline-offset: 2px;
//  //}
//
//  // 高对比度模式
//  @media (prefers-contrast: high) {
//    border-width: 2px;
//
//    &.dark {
//      background: rgba(0, 0, 0, 0.8);
//      border-color: rgba(255, 255, 255, 0.5);
//    }
//
//    &.light {
//      background: rgba(255, 255, 255, 0.95);
//      border-color: rgba(0, 0, 0, 0.5);
//    }
//  }
//
//  // 减少动画
//  @media (prefers-reduced-motion: reduce) {
//    .icon-text,
//    .nav-item,
//    &:hover {
//      transition: none;
//      transform: none;
//    }
//  }
//
//  // 无数据状态
//  &.no-items {
//    .nav-items {
//      opacity: 0.5;
//
//      &::after {
//        content: '暂无导航项';
//        color: rgba(255, 255, 255, 0.6);
//        font-size: 14px;
//      }
//    }
//  }
//
//  // 加载状态
//  &.loading {
//    opacity: 0.7;
//    pointer-events: none;
//
//    &::after {
//      content: '';
//      position: absolute;
//      top: 50%;
//      right: 20px;
//      width: 16px;
//      height: 16px;
//      margin: -8px 0 0 0;
//      border: 2px solid rgba(255, 255, 255, 0.3);
//      border-top-color: #fff;
//      border-radius: 50%;
//      animation: spin 1s linear infinite;
//    }
//  }
//
//  @keyframes spin {
//    to {
//      transform: rotate(360deg);
//    }
//  }
}
